<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.sql.*" %>
<%@ page import="com.data.ConnData" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 0 auto;
        }

        th, td {
            border: 1px solid #ddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<ul class="nav nav-pills" style="padding-top:20px">
    <li class="nav-item" style="padding-left:250px">
        <a class="nav-link" style="color:black" href="conversation.jsp">笔记</a>
    </li>
    <li class="nav-item" style="padding-left:250px">
        <a class="nav-link" style="color:black" href="question.jsp">题目</a>
    </li>
    <li class="nav-item" style="padding-left:250px">
        <a class="nav-link  active" href="rank.jsp">排行榜</a>
    </li>
    <li class="nav-item" style="padding-left:250px">
        <a class="nav-link" style="color:black" href="me.jsp">我的</a>
    </li>
</ul>
<hr>


<%
    ConnData objdata = new ConnData();
    Connection connection = null;
    PreparedStatement psmt = null;
    ResultSet resultSet = null;
    try {
        connection = objdata.getConn();
        String sql = "SELECT * FROM ranking_view ORDER BY correct_answer_count DESC";
        psmt = objdata.getPsmt(sql);
        resultSet = psmt.executeQuery();
%>
<h3 style="text-align:center">排行榜</h3>
<table style="width: 80%;
    border:0;
    margin: 0 auto;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px; /* 设置圆角半径，这里设置为10px，你可以按需调整 */
    background-color: white; /* 设置卡片背景色为白色，可根据喜好更改 */
    padding: 40px; /* 添加内边距，让文字内容不会太靠近边缘 */">

    <tr>
        <th>排名</th>
        <th>用户姓名</th>
        <th>总分数</th>
    </tr>
    <%
        int rank = 1;
        while (resultSet.next()) {
    %>
    <tr>
        <td><%=rank++%>
        </td>
        <td><%=resultSet.getString("nickname")%>
        </td>
        <td><%=resultSet.getInt("correct_answer_count")%>
        </td>
    </tr>
    <%
        }
    %>
</table>
<%
} catch (SQLException e) {
    e.printStackTrace();
%>
<p>数据库操作出现错误，请稍后再试！</p>
<%
    } finally {
        if (resultSet != null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (psmt != null) {
            try {
                psmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (connection != null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
%>
</body>
</html>